<template>
    <view clsss="bar">
        <view class="bar-main">
			
		</view>
        <view class="back-but" :class="{'centered':isCentered}">
            <uv-icon v-if="isShowIcon" size="20" name="arrow-left" color="#fff" class="icon"
                @click="handleBack"></uv-icon>
            <text class="bar-text" :class="{ 'left-bar': !isShowIcon,'no-left':isCentered }">
                {{ title }}
            </text>
			<view class="addtext" v-if="add" @click="skip">
				{{add}}
			</view>
        </view>

    </view>
</template>

<script>
export default {
    props: {
        title: String,
        isShowIcon: {
            type: Boolean,
            default: true
        },
		isCentered:{
			type: Boolean,
			default: false
		},
		add:String
    },
    name: "NavBar",
    data() {
        return {

        };
    },
    methods: {
        handleBack() {
            uni.navigateBack()
        },
		skip(){
			this.$emit('redirect')
		}
    }
}
</script>

<style lang="scss" scoped>
.bar {
    background-color: #4980FF !important;
}

.bar-main{
	width: 100%;
	height: 80rpx;
	background-color: #4980FF !important;
}
.back-but {
	position: relative;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    background-color: #4980FF !important;
}
.centered{
	justify-content: center;
}

.icon {
    margin-left: 20rpx;
}

.bar-text {
    // margin-bottom: 4rpx;
    font-size: 36rpx;
    color: #FFFFFF;
}

.left-bar {
    margin-left: 40rpx;
}
.no-left{
	margin-left: 0;
}
.addtext{
	position: absolute;
	right: 40rpx;
	bottom: 16rpx;
	font-size: 28rpx;
	color: #fff;
	padding: 8rpx 15rpx;
	border: 1px solid #FFF;
	border-radius: 4rpx;
}
</style>